<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
    <link rel="stylesheet" type="text/css" href="css/foot.css" />
    <link href="css/index01.css" rel="stylesheet">
    <link href="css/loading.css" rel="stylesheet" type="text/css">

    <style>
        html {
            font-family: 微软雅黑, serif;
            color: #333333;
        }

        a {
            color: #1D8CE0;
            cursor: pointer;
        }

        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script>
        function login(){
            if (document.getElementById("login").style.display==="none") {
                document.getElementById("login").style.display="block";
            }else {
                document.getElementById("login").style.display="none";
            }
        }
    </script>
</head>
<body style="background: #eee;">
<div class="container" style="width: 100%;margin: 0px;padding:0;border: none  ">
    <!--default默认主题 暗色调inverse-->
    <nav class="navbar navbar-default" style="background: #ddd">
        <div class="navbar-header col-md-1" style="margin-right:10px;">
            <a href="#" class="navbar-brand">悦知</a>
        </div>
        <div id="nav1" class="collapse navbar-collapse col-md-12">
            <ul class="nav navbar-nav">
                <!--active加深-->
                <li><a href="index.html">首页</a></li>
                <li><a href="questionbank.html">题库广场</a></li>
                <li><a href="programeonline.html">在线编译</a></li>
                <li><a href="testinfo.html">能力测试</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="personinfo.html"style="margin-left: 720px">个人中心</a></li>
            </ul>
            <!--搜索框-->
            <form action="" class="navbar-form navbar-right" >
                <input type="text" placeholder="搜索" class="form-control"/>
                <a class="btn btn-primary">搜索</a>
            </form>
        </div>
    </nav>
</div>

<div style="margin-left: 18%;display: flex">
    <!--    导航栏-->
    <div style="height: 600px;width: 10%;margin: 10px">
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a()">java</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a1()">python</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a2()">前端</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a3()" >c++</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a4()">mysql</button>

    </div>
    <div id="a1" style="height: 600px;width: 65%;background:white;margin:10px;padding: 20px;border-radius: 5px" >
        <div class="ques-section-card">
            <div class="ques-card-head ques-card-bul">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%"
                     height="30px" xml:space="preserve">
                                                <defs>
                                                <pattern id="water" width="0.25" height="1.1"
                                                         patternContentUnits="objectBoundingBox">
                                                <path fill="#fff"
                                                      d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"></path>
                                                    </pattern>
                                                    <g id="eff">
                                                <rect fill="url(#water)" x="-119.461" y="0" width="1200" height="120"
                                                      opacity="0.3">
                                                <animate attributeType="xml" attributeName="x" from="-300" to="0"
                                                         repeatCount="indefinite" dur="10s"></animate>
                                                        </rect>
                                                        <rect fill="url(#water)" y="5" width="1600" height="125"
                                                              opacity="0.3" x="-399.447">
                                                <animate attributeType="xml" attributeName="x" from="-400" to="0"
                                                         repeatCount="indefinite" dur="13s"></animate>
                                                        </rect>
                                                    </g>
                                                </defs>
                    <use xlink:href="#eff" opacity="1" style="mix-blend-mode:normal;"></use>
				                            </svg>
            </div>
            <div class="ques-card-title ques-card-title-top">JAVA排行榜</div>

            <table class="table table-striped">
            <thead>
            <tr>
                <td>排名</td>
                <td>名称</td>
                <td>等级</td>
                <td>积分</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>向阳样</td>
                <td>5级</td>
                <td>2020</td>
            </tr>
            <tr>
                <td>1</td>
                <td>向阳样</td>
                <td>5级</td>
                <td>2020</td>
            </tr>
            <tr>
                <td>1</td>
                <td>向阳样</td>
                <td>5级</td>
                <td>2020</td>
            </tr>
            <tr>
                <td>1</td>
                <td>向阳样</td>
                <td>5级</td>
                <td>2020</td>
            </tr>

            </tbody>
        </table>
        </div>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>


    </div>
    <div id="a2" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div class="ques-section-card">
            <div class="ques-card-head ques-card-bul" style="background: lightpink">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="30px" xml:space="preserve">
                                                <defs>
                                                <pattern id="water" width="0.25" height="1.1" patternContentUnits="objectBoundingBox">
                                                <path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"></path>
                                                    </pattern>
                                                    <g id="eff">
                                                <rect fill="url(#water)" x="-119.461" y="0" width="1200" height="120" opacity="0.3">
                                                <animate attributeType="xml" attributeName="x" from="-300" to="0" repeatCount="indefinite" dur="10s"></animate>
                                                        </rect>
                                                        <rect fill="url(#water)" y="5" width="1600" height="125" opacity="0.3" x="-399.447">
                                                <animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="13s"></animate>
                                                        </rect>
                                                    </g>
                                                </defs>
                    <use xlink:href="#eff" opacity="1" style="mix-blend-mode:normal;"></use>
				                            </svg>
            </div>
            <div class="ques-card-title ques-card-title-top">WEB排行榜</div>

            <table class="table table-striped">
                <thead>
                <tr>
                    <td>排名</td>
                    <td>名称</td>
                    <td>等级</td>
                    <td>积分</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>

                </tbody>
            </table>
        </div>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="a3" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div class="ques-section-card">
            <div class="ques-card-head ques-card-bul" style="background: orange">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="365px" height="30px" xml:space="preserve">
                                                <defs>
                                                <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
                                                <path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"></path>
                                                    </pattern>
                                                    <g id="eff">
                                                <rect fill="url(#water)" x="-119.461" y="0" width="1200" height="120" opacity="0.3">
                                                <animate attributeType="xml" attributeName="x" from="-300" to="0" repeatCount="indefinite" dur="10s"></animate>
                                                        </rect>
                                                        <rect fill="url(#water)" y="5" width="1600" height="125" opacity="0.3" x="-399.447">
                                                <animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="13s"></animate>
                                                        </rect>
                                                    </g>
                                                </defs>
                    <use xlink:href="#eff" opacity="1" style="mix-blend-mode:normal;"></use>
				                            </svg>
            </div>
            <div class="ques-card-title ques-card-title-top">MYSQL排行榜</div>

            <table class="table table-striped">
                <thead>
                <tr>
                    <td>排名</td>
                    <td>名称</td>
                    <td>等级</td>
                    <td>积分</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>

                </tbody>
            </table>
        </div>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>


    </div>
    <div id="a4" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div class="ques-section-card">
            <div class="ques-card-head ques-card-bul" style="background: crimson">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="365px" height="30px" xml:space="preserve">
                                                <defs>
                                                <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
                                                <path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"></path>
                                                    </pattern>
                                                    <g id="eff">
                                                <rect fill="url(#water)" x="-119.461" y="0" width="1200" height="120" opacity="0.3">
                                                <animate attributeType="xml" attributeName="x" from="-300" to="0" repeatCount="indefinite" dur="10s"></animate>
                                                        </rect>
                                                        <rect fill="url(#water)" y="5" width="1600" height="125" opacity="0.3" x="-399.447">
                                                <animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="13s"></animate>
                                                        </rect>
                                                    </g>
                                                </defs>
                    <use xlink:href="#eff" opacity="1" style="mix-blend-mode:normal;"></use>
				                            </svg>
            </div>
            <div class="ques-card-title ques-card-title-top">PYTHON排行榜</div>

            <table class="table table-striped">
                <thead>
                <tr>
                    <td>排名</td>
                    <td>名称</td>
                    <td>等级</td>
                    <td>积分</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>

                </tbody>
            </table>
        </div>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>


    </div>

    <div id="a5" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div class="ques-section-card">
            <div class="ques-card-head ques-card-bul" style="background: seagreen">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="365px" height="30px" xml:space="preserve">
                                                <defs>
                                                <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
                                                <path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"></path>
                                                    </pattern>
                                                    <g id="eff">
                                                <rect fill="url(#water)" x="-119.461" y="0" width="1200" height="120" opacity="0.3">
                                                <animate attributeType="xml" attributeName="x" from="-300" to="0" repeatCount="indefinite" dur="10s"></animate>
                                                        </rect>
                                                        <rect fill="url(#water)" y="5" width="1600" height="125" opacity="0.3" x="-399.447">
                                                <animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="13s"></animate>
                                                        </rect>
                                                    </g>
                                                </defs>
                    <use xlink:href="#eff" opacity="1" style="mix-blend-mode:normal;"></use>
				                            </svg>
            </div>
            <div class="ques-card-title ques-card-title-top">C/C++排行榜</div>

            <table class="table table-striped">
                <thead>
                <tr>
                    <td>排名</td>
                    <td>名称</td>
                    <td>等级</td>
                    <td>积分</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>向阳样</td>
                    <td>5级</td>
                    <td>2020</td>
                </tr>

                </tbody>
            </table>
        </div>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>


    </div>


</div>

<script>
    function a(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="block"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"

    }
    function a1(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="none"
        a1.style.display="block"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"

    }
    function a2(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="none"
        a1.style.display="none"
        a2.style.display="block"
        a3.style.display="none"
        a4.style.display="none"

    }
    function a3(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="block"
        a4.style.display="none"

    }
    function a4(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");

        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="block"

    }
    // function a5(){
    //     let a = document.getElementById("a1");
    //     let a1 = document.getElementById("a2");
    //     let a2 = document.getElementById("a3");
    //     let a3 = document.getElementById("a4");
    //     let a4 = document.getElementById("a5");
    //
    //     a.style.display="none"
    //     a1.style.display="none"
    //     a2.style.display="none"
    //     a3.style.display="none"
    //     a4.style.display="none"
    //
    // }
</script>


<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</body>
</body>
</html>